@import "tailwindcss";
@import "tw-animate-css";
@import "./styles/scrollbar.css";

/* 重写 tw-animate-css 的默认 slide 距离，使其更精致 */
@utility slide-in-from-top {
  --tw-enter-translate-y: -1rem;
}

@utility slide-in-from-bottom {
  --tw-enter-translate-y: 1rem;
}

@utility slide-in-from-left {
  --tw-enter-translate-x: -1rem;
}

@utility slide-in-from-right {
  --tw-enter-translate-x: 1rem;
}

@utility slide-out-to-top {
  --tw-exit-translate-y: -1rem;
}

@utility slide-out-to-bottom {
  --tw-exit-translate-y: 1rem;
}

@utility slide-out-to-left {
  --tw-exit-translate-x: -1rem;
}

@utility slide-out-to-right {
  --tw-exit-translate-x: 1rem;
}

@theme {
  /* 颜色系统 */
  --color-background: hsl(0 0% 100%);
  --color-foreground: hsl(0 0% 4%);
  --color-card: hsl(0 0% 100%);
  --color-card-foreground: hsl(0 0% 4%);
  --color-popover: hsl(0 0% 100%);
  --color-popover-foreground: hsl(0 0% 4%);
  --color-primary: hsl(213 100% 50%);
  --color-primary-foreground: hsl(0 0% 98%);
  --color-secondary: hsl(0 0% 96%);
  --color-secondary-foreground: hsl(0 0% 9%);
  --color-muted: hsl(0 0% 96%);
  --color-muted-foreground: hsl(0 0% 45%);
  --color-accent: hsl(0 0% 96%);
  --color-accent-foreground: hsl(0 0% 9%);
  --color-destructive: hsl(0 84% 45%);
  --color-destructive-foreground: hsl(0 0% 100%);
  --color-success: hsl(142 76% 36%);
  --color-success-foreground: hsl(0 0% 100%);
  --color-warning: hsl(45 93% 47%);
  --color-warning-foreground: hsl(0 0% 100%);
  --color-border: hsl(0 0% 90%);
  --color-input: hsl(0 0% 90%);
  --color-ring: hsl(0 0% 63%);
  --color-chart-1: hsl(211.7880 101.9718% 78.6759%);
  --color-chart-2: hsl(217.4076 91.3672% 59.5787%);
  --color-chart-3: hsl(221.4336 86.3731% 54.0624%);
  --color-chart-4: hsl(223.6587 78.7180% 47.8635%);
  --color-chart-5: hsl(226.5426 70.0108% 39.9224%);
  --chart-1: hsl(211.7880 101.9718% 78.6759%);
  --chart-2: hsl(217.4076 91.3672% 59.5787%);
  --chart-3: hsl(221.4336 86.3731% 54.0624%);
  --chart-4: hsl(223.6587 78.7180% 47.8635%);
  --chart-5: hsl(226.5426 70.0108% 39.9224%);
  --color-sidebar: hsl(0 0% 96.3%);
  --color-sidebar-foreground: hsl(0 0% 4%);
  --color-sidebar-primary: hsl(0 0% 9%);
  --color-sidebar-primary-foreground: hsl(0 0% 98%);
  --color-sidebar-accent: hsl(0 0% 93.7%);
  --color-sidebar-accent-foreground: hsl(0 0% 9%);
  --color-sidebar-selected: hsl(0 0% 91%);
  --color-sidebar-selected-foreground: hsl(0 0% 9%);
  --color-sidebar-ring: hsl(0 0% 63%);
  --color-container: hsl(0 0% 98.8%);
  --color-container-foreground: hsl(0 0% 4%);
  --color-container-border: hsl(0 0% 90%);
  --color-block-layout: hsl(0 0% 100%);
  --color-block-layout-foreground: hsl(0 0% 4%);
  --color-block-layout-border: hsl(0 0% 90%);
  
  /* 字体系统 */
  --font-sans: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'Noto Sans CJK SC', 'Source Han Sans SC', 'WenQuanYi Micro Hei', Arial, sans-serif;
  --font-serif: ui-serif, Georgia, Cambria, "Times New Roman", Times, serif;
  --font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  
  /* 字重系统 */
  --font-weight-*: initial;
  --font-weight-normal: 400;
  --font-weight-medium: 500;
  
  /* 圆角系统 */
  --radius: 0.625rem;
  --radius-sm: calc(var(--radius) - 4px);
  --radius-md: calc(var(--radius) - 2px);
  --radius-lg: var(--radius);
  --radius-xl: calc(var(--radius) + 4px);
  
  /* 阴影系统 */
  --shadow-2xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-xs: 0 1px 3px 0px hsl(0 0% 0% / 0.05);
  --shadow-sm: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 1px 2px -1px hsl(0 0% 0% / 0.10);
  --shadow-md: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 2px 4px -1px hsl(0 0% 0% / 0.10);
  --shadow-lg: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 4px 6px -1px hsl(0 0% 0% / 0.10);
  --shadow-xl: 0 1px 3px 0px hsl(0 0% 0% / 0.10), 0 8px 10px -1px hsl(0 0% 0% / 0.10);
  --shadow-2xl: 0 1px 3px 0px hsl(0 0% 0% / 0.25);
  
  /* 间距系统 */
  --spacing: 0.25rem;
}

@layer base {
  /* 暗色模式覆盖 */
  .dark {
    --color-background: hsl(0 0% 4%);
    --color-foreground: hsl(0 0% 98%);
    --color-card: hsl(0 0% 9%);
    --color-card-foreground: hsl(0 0% 98%);
    --color-popover: hsl(0 0% 15%);
    --color-popover-foreground: hsl(0 0% 98%);
    --color-primary: hsl(0 0% 90%);
    --color-primary-foreground: hsl(0 0% 9%);
    --color-secondary: hsl(0 0% 15%);
    --color-secondary-foreground: hsl(0 0% 98%);
    --color-muted: hsl(0 0% 15%);
    --color-muted-foreground: hsl(0 0% 63%);
    --color-accent: hsl(0 0% 25%);
    --color-accent-foreground: hsl(0 0% 98%);
    --color-destructive: hsl(0 84% 70%);
    --color-destructive-foreground: hsl(0 0% 98%);
    --color-success: hsl(142 71% 45%);
    --color-success-foreground: hsl(0 0% 98%);
    --color-warning: hsl(45 93% 58%);
    --color-warning-foreground: hsl(0 0% 98%);
    --color-border: hsl(0 0% 16%);
    --color-input: hsl(0 0% 20%);
    --color-ring: hsl(0 0% 45%);
    --chart-1: hsl(211.7880 101.9718% 78.6759%);
    --chart-2: hsl(217.4076 91.3672% 59.5787%);
    --chart-3: hsl(221.4336 86.3731% 54.0624%);
    --chart-4: hsl(223.6587 78.7180% 47.8635%);
    --chart-5: hsl(226.5426 70.0108% 39.9224%);
    --color-sidebar: hsl(220 14% 3.5%);
    --color-sidebar-foreground: hsl(0 0% 98%);
    --color-sidebar-primary: hsl(213 79% 50%);
    --color-sidebar-primary-foreground: hsl(0 0% 98%);
    --color-sidebar-accent: hsl(220 14% 8.6%);
    --color-sidebar-accent-foreground: hsl(0 0% 98%);
    --color-sidebar-selected: hsl(220 6% 12.5%);
    --color-sidebar-selected-foreground: hsl(0 0% 98%);
    --color-sidebar-ring: hsl(0 0% 32%);
    --color-container: hsl(220 6% 6.5%);
    --color-container-foreground: hsl(0 0% 98%);
    --color-container-border: hsl(0 0% 16%);
    --color-block-layout: hsl(0 0% 9%);
    --color-block-layout-foreground: hsl(0 0% 98%);
    --color-block-layout-border: hsl(0 0% 16%);
  }

  body {
    background-color: var(--color-background);
    color: var(--color-foreground);
  }

  * {
    border-color: var(--color-border);
  }
}